<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2021/3/25
  Time: 11:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .chapter-list >ul{
            display: flex;
            margin: 100px auto 100px auto;
        }
        .chapter-list >ul >li{
            flex-direction: row;
            flex: 1;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="paragraph">
    <div class="chapter-list">
        <ul v-for="chapter in chapters">
            <li @click="_chapterClick(chapter.chapterid)">{{chapter.cname}}</li>
        </ul>
    </div>
</div>
<script src="/comms/jquery.js"></script>
<script src="/comms/vue.js"></script>
<script>
    function request(url, method, fn, data) {
        $.ajax({
            url: url,
            data: data,
            method: method,
            dataType: "json",
            success: fn,
        })
    }
</script>
<script>
    let v = new Vue({
        el: "#paragraph",
        data: {
            chapters: [],
        },
        created:function(){
            this.initParagraph(${sessionScope.nid})
        },
        methods: {
            initParagraph:function(nid){
                let this_ = this;
                request("/chapter/selectChapters?nid="+nid,"GET",function (data) {
                    if (data.flag){
                        this_.chapters = data.data;
                    }else {
                        console.log(data.message);
                    }
                })
            },
            _chapterClick:function (chapterID) {
               location.href="/chapter/read?chapterID="+chapterID;
            }

        }
    })

</script>
</body>
</html>
